<template>
  <div style="padding-top:300px;">
    <el-form class="login-page" ref="loginForm" :model="form" :rules="rules" @keyup.enter.native="loginSubmit">
      <h3>System Login</h3>
      <hr style="background">
      <el-form-item prop="account" style="padding-top:10px;">
        <el-input type="text" v-model="form.account" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入账号密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <a href="javascript:;" class="registerLink">注册账号</a>
      <el-form-item class="loginPage-btn-group">
        <el-button class="login-btn" :loading="logining" @click.native.prevent="loginSubmit">登录</el-button>
        <el-button @click.native.prevent="resetSubmit">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      logining: false,
      form: {
        account: '',
        password: ''
      },
      checked: false,
      rules: {
        account: [
          {required: true, message: '需填写账号!'}
        ],
        password: [
          {required: true, message: '需填写密码!'}
        ]
      }
    }
  },
  methods: {
    resetSubmit () {
      this.$refs.loginForm.resetFields()
    },
    loginSubmit () {
      this.$refs.loginForm.validate((valid) => {
        // console.log(valid)
        if (valid) {
          this.logining = true
          if (this.form.account === 'admin' && this.form.password === '123') {
            // this.logining = false
            // // window.localStorage.setItem('user', this.form.account)
            // // window.localStorage.setItem('pwd', this.form.password)
            // this.$router.push({path: '/test'})
            setTimeout(() => {
              this.logining = false
              this.$router.push({path: '/table'})
            }, 2000)
          }
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.login-page
  width 400px
  margin 0 auto
  border-radius 6px
  background white
  border 1px solid #eeeeee
  padding 20px
  box-shadow 0px 0px 8px 8px rgba(0, 0, 0, 0.1)
  .registerLink
    float right
    font-size 14px
    color #409EFF
    &:hover
      text-decoration none
      color #054486
  .loginPage-btn-group
    padding-top 10px
    .login-btn
      background #409EFF
      color white
</style>


